---
// 可靠的图标组件
// 提供加载状态管理和错误处理

export interface Props {
	icon: string;
	class?: string;
	style?: string;
	size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
	color?: string;
	fallback?: string; // 备用图标或文本
	loading?: "lazy" | "eager";
}

const {
	icon,
	class: className = "",
	style = "",
	size = "md",
	color,
	fallback = "●",
	loading = "lazy",
} = Astro.props;

// 尺寸映射
const sizeClasses = {
	xs: "text-xs",
	sm: "text-sm",
	md: "text-base",
	lg: "text-lg",
	xl: "text-xl",
	"2xl": "text-2xl",
};

const sizeClass = sizeClasses[size] || sizeClasses.md;
const colorStyle = color ? `color: ${color};` : "";
const combinedStyle = `${colorStyle}${style}`;
const combinedClass = `${sizeClass} ${className}`.trim();

// 生成唯一ID
const iconId = `icon-${Math.random().toString(36).substr(2, 9)}`;
---

<span 
  class={`inline-flex items-center justify-center ${combinedClass}`}
  style={combinedStyle}
  data-icon-container={iconId}
>
  <!-- 加载状态指示器 -->
  <span 
    class="icon-loading animate-pulse opacity-50"
    data-loading-indicator
  >
    {fallback}
  </span>
  
  <!-- 实际图标 -->
  <iconify-icon 
    icon={icon}
    class="icon-content opacity-0 transition-opacity duration-200"
    style="color: currentColor;"
    data-icon-element
    loading={loading}
  ></iconify-icon>
</span>

<script define:vars={{ iconId, icon }}>
  // 图标加载和显示逻辑
  (function() {
    const container = document.querySelector(`[data-icon-container="${iconId}"]`);
    if (!container) return;
    
    const loadingIndicator = container.querySelector('[data-loading-indicator]');
    const iconElement = container.querySelector('[data-icon-element]');
    
    if (!loadingIndicator || !iconElement) return;

    // 检查图标是否已经加载
    function checkIconLoaded() {
      // 检查iconify-icon元素是否已经渲染
      const hasContent = iconElement.shadowRoot && 
                        iconElement.shadowRoot.children.length > 0;
      
      if (hasContent) {
        showIcon();
        return true;
      }
      return false;
    }

    // 显示图标，隐藏加载指示器
    function showIcon() {
      loadingIndicator.style.display = 'none';
      iconElement.classList.remove('opacity-0');
      iconElement.classList.add('opacity-100');
    }

    // 显示加载指示器，隐藏图标
    function showLoading() {
      loadingIndicator.style.display = 'inline-flex';
      iconElement.classList.remove('opacity-100');
      iconElement.classList.add('opacity-0');
    }

    // 初始状态
    showLoading();

    // 监听图标加载事件
    iconElement.addEventListener('load', () => {
      showIcon();
    });

    // 监听图标加载错误
    iconElement.addEventListener('error', () => {
      // 保持显示fallback
      console.warn(`Failed to load icon: ${icon}`);
    });

    // 使用MutationObserver监听shadow DOM变化
    if (window.MutationObserver) {
      const observer = new MutationObserver(() => {
        if (checkIconLoaded()) {
          observer.disconnect();
        }
      });

      // 监听iconify-icon元素的变化
      observer.observe(iconElement, {
        childList: true,
        subtree: true,
        attributes: true
      });

      // 设置超时，避免无限等待
      setTimeout(() => {
        observer.disconnect();
        if (!checkIconLoaded()) {
          console.warn(`Icon load timeout: ${icon}`);
        }
      }, 5000);
    }

    // 立即检查一次（可能已经加载完成）
    setTimeout(() => {
      checkIconLoaded();
    }, 100);
  })();
</script>

<style>
  .icon-loading {
    min-width: 1em;
    min-height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .icon-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
  }
  
  /* 确保 iconify-icon 能够继承颜色 */
  iconify-icon {
    color: currentColor;
  }
  
  [data-icon-container] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
    min-height: 1em;
  }
  
  [data-icon-container] .icon-loading,
  [data-icon-container] .icon-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>